<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          教师管理
        </p>
        <VmBtable type="edit" ref="VmBtable"
                  :columns="dataColumns"
                  :data="dataTable"
                  :searchparam="searchParam"
                  :exportBtn="false"
                  :batchDelBtn="false"
                  :action="excelImportUrl"
                  v-on:searchFn="searchFn"
                  v-on:page-change="pageChangeFn"
                  v-on:addFn="addFn"
                  v-on:editFn="editFn"
                  v-on:deleteFn="deleteFn"
                  v-on:importSuccess="queryFn"
                  placeholder="教师名关键字"
                  searchText="教师名："
                  cleanText="刷新"
                  :exportPath="exportPath"
                  v-on:restFn="restFn">
          <div slot="search" class="db_inline">

          </div>
        </VmBtable>
      </Card>
    </Row>
    <Modal v-model="modal.visible" :title="modal.title" v-on:on-ok="subForm" :mask-closable="false" width="680"
           v-on:on-cancel="cancelSub">
      <Form ref="Form" :model="modal.form" :label-width="80" label-position="right" :rules="modal.rules">
        <Row>
          <Col span="12">
            <FormItem label="名称" prop="name">
              <Input v-model="modal.form.name" placeholder="请输入姓名" style="width:73%"/>
            </FormItem>
            <FormItem label="性别" prop="sex">
              <RadioGroup v-model="modal.form.sex">
                <Radio label='女'>女</Radio>
                <Radio label='男'>男</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="联系号码" prop="phone">
              <Input v-model="modal.form.phone" placeholder="请输入联系号码" style="width:73%"/>
            </FormItem>
            <FormItem label="IC卡号" prop="icCard">
              <Input v-model="modal.form.icCard" placeholder="请输入ic卡号" style="width:73%"/>
            </FormItem>
            <FormItem label="入职时间" prop="inDate">
              <DatePicker v-model="modal.form.inDate" @on-change="($event)" type="date" placeholder="选择入职时间"
                          style="width: 73%"></DatePicker>
            </FormItem>
            <FormItem label="备注" prop="remark">
              <Input v-model="modal.form.remark" type="textarea" placeholder="备注信息" style="width:73%"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="头像" style="position: relative;right: 60px" prop="avatar">
              <LogoUpload ref="avatarUpload" accept="image/*" @get-file="getUploadFile" :multiple="false"
                          delImgPath="teacher/avatar">

              </LogoUpload>
            </FormItem>
            <FormItem label="状态" prop="avatar" v-if="modal.isEdit">
              <RadioGroup v-model="modal.form.duty">
                <Radio label='1'>在职</Radio>
                <Radio label='0'>离职</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="离职时间" prop="leaveDate" v-if="modal.form.duty==='0'">
              <DatePicker v-model="modal.form.leaveDate" @on-change="($event)" type="date" placeholder="选择离职时间"
                          style="width: 73%"></DatePicker>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelSub">取消</Button>
        <Button type="primary" @click="subForm" :loading="modal.loading">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";
  import LogoUpload from "@/components/views/upload/Upload"
  import Cookie from "js-cookie"
  import Axios from 'axios'

  export default {
    components: {
      VmBtable,
      LogoUpload
    },
    data() {
      const phoneValidate = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入联系人电话'));
        } else {
          callback();
        }
      };
      return {
        searchParam: {
          current: 1,
          size: 20,
          total: 0,
          name: '',
        },
        exportPath: 'http://wy-file.wekids.group/teacher.xlsx',
        excelImportUrl: Axios.defaults.baseURL + '/teacher/import',
        dataColumns: [
          {
            title: '序号',
            type: 'index',
            align: 'center',
            minWidth: 100,
          },
          {
            title: '名称',
            align: 'center',
            key: 'name',
            minWidth: 100,
          },
          {
            title: '用户名',
            align: 'center',
            key: 'username',
            minWidth: 100,
          },
          {
            title: '性别',
            align: 'center',
            key: 'sex',
            minWidth: 100,
          },
          {
            title: '联系号码',
            align: 'center',
            key: 'phone',
            minWidth: 180,
          },
          {
            title: '管理员权限',
            minWidth: 150,
            key: 'position',
            align: 'center',
            sortable: true,
            sortType: 'asc',
            render: (h, param) => {
              return h('div', [
                h('i-switch', {
                  props: {
                    type: 'primary',
                    size: 'large',
                    value: param.row.position === '1'
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    'on-change': (value) => {
                      this.changePermission(param.row)
                    }
                  }
                }, [
                  h('span', {
                    slot: 'open'
                  }, '启用'),
                  h('span', {
                    slot: 'close'
                  }, '停用')
                ])
              ]);
            }
          },
          {
            title: '状态',
            align: 'center',
            key: 'duty',
            minWidth: 100,
            sortable: true,
            sortType: 'desc',
            render: (h, param) => {
              let str = '在职';
              let color = 'green';
              if (param.row.duty === '0') {
                str = '离职';
                color = 'orange'
              }
              return h('div', {style: {color: color}}, str);
            }
          },
          {
            title: 'IC卡号',
            align: 'center',
            key: 'icCard',
            minWidth: 80,
          },
        ],
        operate: [],
        dataTable: [],
        modal: {
          visible: false,
          title: '',
          isEdit: false,
          loading: false,
          form: {
            name: '',
            sex: '2',
            icCard: '',
            phone: '',
            inDate: '',
            avatar: '',
            duty: '1',
            leaveDate: '',
            remark: ''
          },
          rules: {
            'name': [{
              required: true,
              trigger: 'blur',
              message: '必填项'
            }],
            'phone': [{
              required: true,
              trigger: 'blur',
              validator: phoneValidate
            }],
          }
        },
      };
    },
    methods: {
      getUploadFile(oldList, newFile) {
        this.modal.form.avatar = newFile.name;
      },
      changePermission(teacher) {
        API.changePermission(teacher).catch(resp => {
          this.queryFn();
        })
      },
      addFn() {
        Object.assign(this.modal, {
          visible: true,
          isEdit: false,
          title: '添加',
          form: {sex: '女', duty: '1'}
        })
      },
      editFn(data) {
        Object.assign(this.modal, {
          visible: true,
          isEdit: true,
          title: '编辑'
        });
        Object.assign(this.modal.form, data);
        this.modal.form.sex = data.sex + ''
        let avatar = data.avatar;
        if (!avatar) {
          return;
        }
        this.$refs.avatarUpload.acceptImageList([{
          id: avatar,
          key: avatar,
          fname: avatar,
          type: 'pic'
        }])
      },
      deleteFn(data) {
        API.deleteTeacher({id: data[0].id}).then(resp => {
          this.queryFn();
        })
      },
      restFn() {
        this.searchParam.current = 1;
        this.searchParam.size = 20;
        this.searchParam.name = '';
        this.queryFn();
      },
      queryFn() {
        API.fetchTeacher(this.searchParam).then(
          res => {
            let data = res.data;
            this.dataTable = data.records;
            this.searchParam.total = data.total;
          },
          error => {
            this.$Message.info(error.msg);
          }
        );
      },
      complete() {
        Object.assign(this.modal, {
          visible: false,
          title: '',
          loading: false,
        });
        this.$refs.Form.resetFields();
        this.$refs.avatarUpload.acceptImageList([]);
      },
      subForm() {
        this.$refs.Form.validate(valid => {
          if (valid) {
            let data = Object.assign(this.modal.form);
            this.modal.loading = true;
            if (data.id) {
              API.updateTeacher(data).then(resp => {
                this.complete();
                this.queryFn();
              }).catch(resp => {
                this.modal.loading = false;
              })
            } else {
              API.createTeacher(data).then(resp => {
                this.complete();
                this.queryFn();
              }).catch(resp => {
                this.modal.loading = false;
              })
            }
          }
        })
      },
      cancelSub() {
        this.complete();
      },
      pageChangeFn(current) {
        this.searchParam.current = current;
        this.queryFn();
      },
      searchFn(value) {
        this.searchParam.name = value;
        this.queryFn();
      },
    },
    created() {
    },
    mounted() {
      this.queryFn();
    }
  }
</script>

<style scoped>

</style>
